<template>
  <div class="bar-chart-wrapper">
    <!-- <button type="button" @click="refreshData">刷新</button> -->
    <BaseEcharts :chartData="realTimeData" :barWidth="15" ref="bar" height="100%" />
  </div>
</template>

<script>
import BaseEcharts from './echart.vue'
export default {
  name: 'BoxLeftB',
  components: {
    BaseEcharts
  },
  data() {
    return {
      barData: [
        {
          label: '世维图',
          value: 80,
          per: 0,
          max: 100,
          max1: 110,
          itemColorA: '#0867f2',
          itemColorB: '#80f8fa'
        },
        {
          label: '永光彩印',
          value: 40,
          per: 0,
          max: 100,
          max1: 111.5,
          itemColorA: '#847648',
          itemColorB: '#ece179'
        },
        {
          label: '兴永合',
          value: 30,
          per: 0,
          max: 100,
          max1: 113.1,
          itemColorA: '#7e7146',
          itemColorB: '#cfb662'
        },
        {
          label: '美科安防',
          value: 70,
          per: 0,
          max: 100,
          max1: 115.5,
          itemColorA: '#36b67f',
          itemColorB: '#9affd4'
        },
        {
          label: '合兴包装',
          value: 65,
          per: 0,
          max: 100,
          max1: 137.5,
          itemColorA: '#176d62',
          itemColorB: '#75f4e4'
        },
        {
          label: '名祥科技',
          value: 96,
          per: 0,
          max: 100,
          max1: 140.2,
          itemColorA: '#1c9eef',
          itemColorB: '#80c8f5'
        },
        {
          label: '信和达',
          value: 82,
          per: 0,
          max: 100,
          max1: 145.1,
          itemColorA: '#0667f1',
          itemColorB: '#5497f7'
        },
        // { label: '毅兴行', value: 80, per: 0, max: 100, max1: 191.5 , itemColorA: 'red', itemColorB: 'blue'},
        {
          label: '联达科技',
          value: 70,
          per: 0,
          max: 100,
          max1: 114.6,
          itemColorA: '#24aca3',
          itemColorB: '#37e8a5'
        }
      ],
      realTimeData: [],
      intervalIns: null
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.realTimeData = []
      setTimeout(() => {
        this.realTimeData = this.barData.map((item) => {
          const num = this.toFixed(item.value / item.max, 4)
          const perNum = this.toFixed(num * 100, 2)
          return {
            ...item,
            num,
            perNum,
            per: perNum + '%'
          }
        })
      }, 50)
    },
    toFixed(n, fixedNum = 2) {
      return ~~(Math.pow(10, fixedNum) * n) / Math.pow(10, fixedNum)
    }
  },
  destroyed() {
    clearInterval(this.intervalIns)
  }
}
</script>

<style scoped>
.bar-chart-wrapper {
  height: 100%;
}
</style>
